<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">

        <!-- 
            Vue中常用的按键别名（牢牢掌握）：
						回车 => enter
						删除 => delete (捕获“删除”和“退格”键)
						退出 => esc
						空格 => space
						换行 => tab（必须配	合keydown才有效果）
						上 => up
						下 => down
						左 => left
						右 => right
         -->

        <!-- 根据点击的键盘的 keyCode 判断,触发对应的事件 -->
        <!-- 注意区分 keydown 和 keyup 事件 -->
        <!-- 回车键 -->
        <input @keyup.enter="showMsg" type="text" placeholder="输入内容，按下回车提示输入"><br />
        <input @keyup.13="showMsg" type="text" placeholder="输入内容，按下回车提示输入"><br />

        <!-- delete键 同时捕获 删除 键和 退格 键 -->
        <input @keyup.delete="showMsg" type="text" placeholder="输入内容，按下删除提示输入"><br />

        <!-- Esc键,退出键 -->
        <input @keyup.esc="showMsg" type="text" placeholder="输入内容，按下esc提示输入"><br />

        <!-- 空格键 -->
        <input @keyup.space="showMsg" type="text" placeholder="输入内容，按下空格提示输入"><br />

        <!-- Tab换行键,需要 keyup 与 keydown 结合使用 -->
        <input @keydown.tab="showMsg" type="text" placeholder="输入内容，按下tab提示输入"><br />

        <!-- 下翻页键 (上下左右都有,举例说明) -->
        <input @keyup.down="showMsg" type="text" placeholder="输入内容，按下↓提示输入"><br />

        <!-- 其他案件(自定义,举例 w 键) -->
        <input @keyup.w="showMsg" type="text" placeholder="输入内容，按下w提示输入">
    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el: '#demo',
            methods: {
                showMsg() {
                    console.log(event.target.value)
                }
            }
        })
    </script>
</body>

</html>